<template>
    <el-row>
        <el-col class="section3">
            <div class="offset">老人信息</div>
            <el-row style="margin-top: 50px;" class="offset1">
                <el-col :span="8">
                    <div class="circle-num">
                        <img :src="this.user.icon" alt="Avatar" style="width:50px;height:50px">
                    </div>
                </el-col>
                <el-row>
                    <el-col :span="7">
                        <div style="font-weight:bold;font-size:15px;">{{ this.user.name }}</div>
                    </el-col>
                    <el-col :span="4">
                        <div v-if="this.user.gender === 1" style="font-size:15px;">男</div>
                        <div v-else>女</div>
                    </el-col>
                    <el-col :span="4">
                        <div>{{ this.user.age }}岁</div>
                    </el-col><br>
                    <div v-if="this.user.socialStatus === 0" style="font-size:15px;">职工社保</div>
                    <div v-else>居民社保</div>
                    <el-row>
                        <div style="font-size:15px;margin-top:30px">档案号: {{ this.user.userNum }}</div>
                    </el-row>
                    <el-row>
                        <div style="font-size:15px;margin-top:15px">证件号: {{ this.user.identity }}</div>
                    </el-row>
                    <el-row>
                        <div style="font-size:15px;margin-top:15px">联系电话: {{ this.user.tel }}</div>
                    </el-row>
                    <el-row>
                        <div style="font-size:15px;margin-top:15px">-------------------------------------------
                        </div>
                    </el-row>
                    <el-row>
                        <div style="font-size:15px;margin-top:15px">住院区域: {{ this.user.areaNum }}</div>
                    </el-row>
                    <el-row>
                        <div style="font-size:15px;margin-top:15px">房间: {{ this.user.roomnum }}</div>
                    </el-row>
                    <el-row>
                        <div style="font-size:15px;margin-top:15px">床位号: {{ this.user.number }}</div>
                    </el-row>
                    <el-row>
                        <div style="font-size:15px;margin-top:15px">主管医师: {{ this.user.doctorNum }}</div>
                    </el-row>
                    <el-row>
                        <div style="font-size:15px;margin-top:15px">责任护士: {{ this.user.nurseName }}</div>
                    </el-row>
                    <el-row>
                        <div style="font-size:15px;margin-top:15px">护工: {{ this.user.porterName }}</div>
                    </el-row>
                    <el-row>
                        <div style="font-size:15px;margin-top:15px">护理级别: {{ this.user.nursingName }}</div>
                    </el-row>
                    <el-row>
                        <div style="font-size:15px;margin-top:15px">入院诊断: {{ this.user.admissionDiagnosis }}</div>
                    </el-row>
                    <el-row>
                        <div style="font-size:15px;margin-top:15px">-------------------------------------------
                        </div>
                    </el-row>
                    <el-row>
                        <div style="font-size:15px;margin-top:15px">入院时间: {{ this.user.inTime }}</div>
                    </el-row>
                    <el-row>
                        <div style="font-size:15px;margin-top:15px">住院余额: {{ this.user.resultMoney}}</div>
                    </el-row>
                </el-row>
            </el-row>
        </el-col>
        <el-col class="section">
            <div style="margin-top: 80px;">
                <el-button type="primary" @click="exportToWPS">导出</el-button>
            </div>
            <el-row style="margin-top: 80px;">
                <el-col :span="6">
                    老人姓名:{{ this.user.name }}
                </el-col>
                <el-col :span="6">
                    房间:{{ this.user.roomnum }}
                </el-col>
                <el-col :span="6">
                    床号:{{ this.user.number }}
                </el-col>
                <el-col :span="6">
                    档案号:{{ this.user.userNum }}
                </el-col>
            </el-row>
            <el-table :data="paramData" style="margin-top: 10px;">
                <el-table-column label="护理记录(生活)" align="center" :span="12">
                    <el-table-column prop="createTime" label="时间" align="center"
                        :formatter="row => formatDate(row.createTime)" width="150px">
                    </el-table-column>
                    <el-table-column label="意识(次)" align="center">
                        <el-table-column prop="consciousness1" label="清醒" align="center">
                        </el-table-column>
                        <el-table-column prop="consciousness2" label="模糊" align="center">
                        </el-table-column>
                        <el-table-column prop="consciousness3" label="昏睡" align="center">
                        </el-table-column>
                    </el-table-column>
                    <el-table-column label="清洁起居(次)" align="center">
                        <el-table-column prop="cleanliness1" label="洗漱" align="center">
                        </el-table-column>
                        <el-table-column prop="cleanliness2" label="洗头" align="center">
                        </el-table-column>
                        <el-table-column prop="cleanliness3" label="洗澡" align="center">
                        </el-table-column>
                    </el-table-column>
                    <el-table-column label="饮食" align="center">
                        <el-table-column prop="eating1" label="正常" align="center">
                        </el-table-column>
                        <el-table-column prop="eating2" label="不吃不喝" align="center">
                        </el-table-column>
                    </el-table-column>
                    <el-table-column label="服药" align="center">
                        <el-table-column prop="medicineMorning" label="早" align="center">
                        </el-table-column>
                        <el-table-column prop="medicineAfternoon" label="中" align="center">
                        </el-table-column>
                        <el-table-column prop="medicineEvening" label="晚" align="center">
                        </el-table-column>
                    </el-table-column>
                    <el-table-column prop="remark" label="异常情况及处理措施" align="center" width="180">
                    </el-table-column>
                </el-table-column>
            </el-table>
        </el-col>
    </el-row>

</template>

<script>
import * as XLSX from 'xlsx';
export default {
    data() {
        return {
            userNum: '',
            user: {
            },
            paramData: []
        }
    },
    methods: {
        //根据编号查用户
        queryUser() {
            this.$axios.get('api/user/queryByUserNum/' + this.userNum)
                .then(res => {
                    if (res.data.code == 200) {
                        this.user = res.data.data
                        console.log(this.user)
                    }
                })
        },
        //根据用户编号查询护理记录
        queryUserRecords() {
            this.$axios.get('api/nursing/queryUserNurseRecord/' + this.userNum)
                .then(res => {
                    if (res.data.code == 200) {
                        this.paramData = res.data.data
                    }
                })
        },
        formatDate(date) {
            var d = new Date(date);
            var month = '' + (d.getMonth() + 1);
            var day = '' + d.getDate();
            var year = d.getFullYear();

            if (month.length < 2)
                month = '0' + month;
            if (day.length < 2)
                day = '0' + day;

            return [year, month, day].join('-');
        },
        exportToWPS() {
            try {
                let data = this.paramData.map(row => {
                    return {
                        '时间': this.formatDate(row.createTime),
                        '档案号':this.user.userNum,
                        '老人姓名':this.user.name,
                        '房号':this.user.roomnum,
                        '床号':this.user.number,
                        '意识(清醒)': row.consciousness1,
                        '意识(模糊)': row.consciousness2,
                        '意识(昏睡)': row.consciousness3,
                        '清洁起居(洗漱)': row.cleanliness1,
                        '清洁起居(洗头)': row.cleanliness2,
                        '清洁起居(洗澡)': row.cleanliness3,
                        '饮食(正常)': row.eating1,
                        '饮食(不吃不喝)': row.eating2,
                        '服药(早)': row.medicineMorning,
                        '服药(中)': row.medicineAfternoon,
                        '服药(晚)': row.medicineEvening,
                        '异常情况及处理措施': row.remark
                    };
                });

                const ws = XLSX.utils.json_to_sheet(data);
                const wb = XLSX.utils.book_new();
                XLSX.utils.book_append_sheet(wb, ws, "护理记录");
                const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });

                saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '护理记录.xlsx');
            } catch (error) {
                console.error('导出错误：', error);
            }
    }
},
created() {
    this.userNum = this.$route.query.userNum
    this.queryUser();
    this.queryUserRecords();
    this.formatDate();
}
}
</script>

<style scoped>
.section {
    width: 1000px;
    height: 800px;
    background-color: white;
    margin-top: 10px;
    margin-left: 25px;
}

.section3 {
    width: 300px;
    height: 800px;
    background-color: white;
    margin-top: 10px;
    margin-left: 25px;
}

.offset {
    margin-top: 25px;
    margin-left: 50px;
}

.offset1 {
    margin-left: 20px;
}

.offset2 {
    margin-left: 100px;
}

.offset3 {
    margin-top: 30px;
    margin-left: 25px;
}

.info {
    display: flex;
    align-items: center;
}

.flex-container {
    display: flex;
    /* 将父级元素设为flex，使其子元素按行排列 */
}

.line {
    width: 3px;
    /* 改变线的宽度 */
    height: 20px;
    /* 改变线的高度 */
    background-color: rgb(0, 174, 255);
    /* 改变线的颜色 */
    margin-right: 8px;
}

.text {
    color: rgb(0, 174, 255);
}

.align-right {
    display: flex;
    justify-content: flex-end;
}

.offset .text {
    display: inline-block;
    vertical-align: middle;
    /* 保证文本与正方形垂直居中对齐 */
    margin-left: 10px;
    /* 根据需要调整文本与正方形之间的距离 */
}

.circle-num {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    /* 给予元素圆形形状 */
    background-color: #ff7f00;
    /* 背景颜色 */
    color: white;
    font-size: 16px;
    /* 绝对定位使得这个元素可以相对于父元素定位 */
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.card-container .el-card {
    flex-basis: calc(30% - 20px);
    margin: 10px;
}

.selected {
    border: 2px solid blue;
}
</style>